<template>
	<view class="container">
		<!-- 店面顶部开始 -->
		<view class="storefront" :class="{'hidden': scrollDown}">
			<view class="horizontal_store_layout">
				<view class="picture_container"><u--image :showLoading="true"
						src="https://img1.baidu.com/it/u=252535436,3231589245&fm=253&fmt=auto&app=138&f=JPEG?w=476&h=512"
						width="75px" height="75px" @click="click" shape="circle"></u--image>
				</view>
				<view class="store_vertical_layout">
					<text class="trade_name">杨国福麻辣烫(东四店)</text>
					<view class="internal_horizontal_layout">
						<text class="announcement">公告：欢迎光临杨国福麻辣烫期待你的光临噢</text>
						<button class="collect">收藏</button>
					</view>
				</view>
			</view>
			<view class="parting_line">
				<u-divider lineColor="#000000" :dashed="true"></u-divider>
			</view>
			<view class="discount_container">
				<text class="favorable">满25减8；满35减10；满60减15（在线支付专享）好吃不停</text>
			</view>
		</view>
		<!-- 店面顶部结束 -->
		<!-- 菜品选择开始 -->
		<view class="content-container">
			<!-- 左侧类别开始 -->
			<scroll-view class="classify-container" scroll-y="true">
				<view class="classify" v-for="(classify, index) in goodsList" :key="classify.id"
					:class="['classify', {'active': classifySeleted === classify.id }]" @tap="tapClassify(classify.id)">
					<view class="name">{{ classify.classifyName }}</view>
				</view>
			</scroll-view>
			<!-- 左侧类别结束 -->
			<!-- 右侧菜品列表开始 -->
			<scroll-view class="goods-container" scroll-y="true" :scroll-into-view="classifyViewed"
				@scroll="onGoodsScroll">
				<view v-for="(classify, index) in goodsList" :key="classify.id" :id="classify.id">
					<view class="title">{{ classify.classifyName }}</view>
					<view v-for="(id, idIndex) in classify.goods" :key="id" class="goods">
						<image class="pic" :src="goods[id].pic"></image>
						<view class="name ellipsis">{{ goods[id].name }}</view>
						<view class="sold">月售{{ goods[id].sold }}</view>
						<view class="price">￥{{ goods[id].price }}</view>
						<view class="addCart">
							<!-- 显示数量和减少按钮 -->
							<view class="reduce" v-if="cart.list[id]" @tap="tapReduceCart(id)">-</view>
							<view class="num" v-if="cart.list[id]">{{ cart.list[id] }}</view>
							<!-- 添加按钮 -->
							<view class="add" @tap="tapAddCart(id)">+</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<!-- 右侧菜品列表结束 -->
		</view>
		<!-- 菜品选择结束 -->
		<!-- 底部购物车模块开始 -->
		<view>
			<view class="cart-detail" :hidden="!showCartDetail">
				<view class="mask" @tap="hideCartDetail"></view>
				<view class="list">
					<view class="empty_cart">
						<u-icon name="trash" @click="emptyCart" color="#b4b4b4" labelSize="20" label="清空购物车" size="28"></u-icon>
					</view>
					<view class="item" v-for="(num, id) in cart.list" :key="id">
						<view class="picture_shopping_cart_display">
							<image class="shopping_cart_pic" :src="goods[id].pic"></image>
							<view class="cart_name ellipsis">{{ goods[id].name }}</view>
							<view class="shopping_cart_sold">60克</view>
							<view class="shopping_cart_price">￥{{ goods[id].price }}</view>
							<view class="add_delete_button">
								<view class="reduce_shopping_cart" @tap="tapReduceCart(id)">-</view>
								<view class="num_shopping_cart">{{ num }}</view>
								<view class="add_shopping_cart" @tap="tapAddCart(id)">+</view>
							</view>
						</view>
						<!-- 				<view class="total_shopping_cart">￥{{ goods[id].price * num }}</view> -->
					</view>
				</view>
			</view>
			<view class="cart">
				<view class="data" @tap="showCartDetails">
					<view class="icon">
						<image class="image_shopping_cart ellipsis" src="/static/img/cart.png"></image>
						<view class="count">{{ cart.count }}</view>
					</view>
					<view class="total">合计￥{{ cart.total }}</view>
				</view>
				<form @submit="submit" report-submit="true">
					<button class="yellow" :class="{'disabled': !cart.count}" type="submit"
						:disabled="!cart.count">去结算</button>
				</form>
			</view>
		</view>
		<!-- 底部购物车模块结束 -->
	</view>
</template>

<script>
	import projectConfig from '@/common/projectConfig.js' // 引入全局常量文件
	export default {
		data() {
			return {
				goods: projectConfig.goods,
				goodsList: projectConfig.goodsList,
				classifySeleted: 0, // 当前选中的分类ID
				classifyViewed: '', // 用于滚动到指定分类的ID
				scrollDown: false,
				showCartDetail: false, // 控制购物车详情的显示隐藏
				cart: {
					count: 0, // 购物车数量
					total: 0, // 购物车总价
					list: {}, // 购物车商品列表
				},
			};
		},
		onShow: function() {
			this.classifySeleted = this.goodsList[0].id
		},
		methods: {
			/**
			 * 点击左侧类别列表事件处理
			 * @param {Object} id 类别ID
			 */
			tapClassify: function(id) {
				this.classifyViewed = id;
				// 使用 setTimeout 实现延迟修改
				setTimeout(() => {
					this.classifySeleted = id;
				}, 100);
			},
			/**
			 * 处理右侧食品列表的滚动计算
			 * @param {Object} 滑动滚动监听事件返回参数集合
			 */
			onGoodsScroll(e) {
				if (e.detail.scrollTop > 10 && !this.scrollDown) {
					this.scrollDown = true;
				} else if (e.detail.scrollTop < 10 && this.scrollDown) {
					this.scrollDown = false;
				}
				const scale = e.detail.scrollWidth / 570;
				const scrollTop = e.detail.scrollTop / scale;
				let h = 0;
				let classifySeleted;
				const len = this.goodsList.length;
				this.goodsList.forEach((classify, i) => {
					const _h = 70 + classify.goods.length * (46 * 3 + 20 * 2);
					if (scrollTop >= h - 100 / scale) {
						classifySeleted = classify.id;
					}
					h += _h;
				});
				this.classifySeleted = classifySeleted;
			},
			hideCartDetail() {
				// 隐藏购物车详情
				this.showCartDetail = false;

			},
			showCartDetails() {
				// 显示购物车详情
				if (this.cart.count != 0) {
					this.showCartDetail = !this.showCartDetail
				}
			},

			tapReduceCart(id) {
				if (this.cart.list[id]) {
					if (this.cart.list[id] === 1) {
						delete this.cart.list[id];
					} else {
						this.cart.list[id]--;
					}
					this.countCart();
				}
			},
			tapAddCart(id) {
				if (!this.cart.list[id]) {
					this.cart.list[id] = 1;
				} else {
					this.cart.list[id]++;
				}
				this.countCart();
			},
			addCart(id) {
				const num = this.cart.list[id] || 0;
				this.cart.list[id] = num + 1;
				this.countCart();
			},
			reduceCart(id) {
				const num = this.cart.list[id] || 0;
				if (num <= 1) {
					delete this.cart.list[id];
				} else {
					this.cart.list[id] = num - 1;
				}
				this.countCart();
			},
			countCart(id) {
				let count = 0;
				let total = 0;
				for (let id in this.cart.list) {
					const goods = this.goods[id];
					count += this.cart.list[id];
					total += goods.price * this.cart.list[id];
				}
				this.cart.count = count;
				this.cart.total = total;
			},
			submit() {
				// 获取formId
				const formId = e.mp.detail.formId;
				// 发送模板消息
				server.sendTemplate(formId)
					.then(res => {
						if (res.data.errorcode === 0) {
							uni.showModal({
								showCancel: false,
								title: '恭喜',
								content: '订单发送成功！下订单过程顺利完成，本例不再进行后续订单相关的功能。',
								success: function(res) {
									if (res.confirm) {
										uni.navigateBack();
									}
								}
							});
						}
					})
					.catch(err => {
						console.log(err);
					});
			},
			/**
			 * 点击清空购物车图标ad
			 */
			emptyCart:function(){
				this.cart = myArray.map(() => null);
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		overflow: hidden;
	}

	/* 店面顶部开始 */
	.container {
		height: 100%;
		overflow: hidden;

		.hidden {
			/*-webkit-transform: translate3d(0,-290rpx,0);*/
			margin-top: -210rpx;
		}

		.storefront {
			position: relative;
			background: #F58A16;
			color: #000;
			-webkit-transition: all 0.6s ease-in-out;

			.horizontal_store_layout {
				display: flex;
				flex-direction: row;
				justify-content: left;
				padding-left: 30rpx;
				align-items: center;

				.picture_container {
					border-radius: 50%;
					border: 1px solid #dcdcdc;
				}

				.store_vertical_layout {
					display: flex;
					flex-direction: column;

					.trade_name {
						color: black;
						font-weight: bold;
						padding-left: 15rpx;
						font-size: 30rpx;
						text-align: left;
					}

					.internal_horizontal_layout {
						display: flex;
						flex-direction: row;
						padding-top: 20rpx;
						align-items: center;

						.announcement {
							color: #383838;
							font-size: 22rpx;
							text-align: left;
							padding-left: 15rpx;
							font-size: 25rpx;
							white-space: nowrap;
							/* 防止文本换行 */
							overflow: hidden;
							/* 隐藏溢出的文本内容 */
							text-overflow: ellipsis;
							/* 显示省略号 */
							width: 200px;
							/* 设置容器的宽度，根据需要进行调整 */
						}

						.collect {
							border: 25rpx;
							font-size: 25rpx;
							// width: 100rpx;
							border-radius: 25rpx;
							margin-left: 85rpx;
							text-align: center;
							/* 水平居中 */
							line-height: 5px;
							/* 垂直居中，这个值应根据按钮的高度调整 */
							padding: 10px 10px;
							/* 添加一些内边距来美化按钮 */
							background-color: #F58A16;
							/* 设置按钮背景颜色 */
							color: #313131;
							/* 设置按钮文本颜色 */
							border: 2px solid #313131;
							/* 设置按钮边框，2px是边框宽度，#2980b9是边框颜色 */
						}
					}
				}
			}

			.parting_line {
				padding: 0 35rpx 0 35rpx;
				height: 10rpx;
			}

			.discount_container {
				display: flex;
				justify-content: center;
				align-items: center;
				padding: 10rpx 0rpx 15rpx 0rpx;

				.favorable {
					font-size: 25rpx;
				}
			}
		}

		/* 店面顶部结束 */

		/* 菜品选择开始 */
		.content-container {
			display: flex;
			height: 100%;
			box-sizing: border-box;
			padding-bottom: 100rpx;

			/* 左侧类别开始 */
			.classify-container {
				width: 180rpx;
				background: #efefef;
				height: 100%;
			}

			.classify {
				padding: 50rpx 30rpx;
				text-align: center;
				border-bottom: 1px dashed #aaa;

				.name {
					padding-top: 20rpx;
					font-size: 36rpx;
					line-height: 60rpx;
				}

			}

			.active {
				background: #fff;
			}

			/* 左侧类别结束 */
			/* 右侧菜品列表开始 */
			.goods-container {
				flex: 1;
				background: #ffffff;
				height: 100%;

				.title {
					padding: 20rpx 25rpx;
					color: #646464;
					font-size: 30rpx;
					line-height: 30rpx;
					background: #f7f7f7;
				}

				.goods {
					position: relative;
					padding: 20rpx 30rpx;
					font-size: 36rpx;
					line-height: 40rpx;
					border-bottom: 1px solid #f7f7f7;

					.pic {
						float: left;
						width: 130rpx;
						height: 130rpx;
						margin-right: 20rpx;
					}

					.ellipsis {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.sold {
						color: #989898;
						font-size: 30rpx;
						line-height: 46rpx;
					}

					.price {
						color: #f45044;
						font-size: 36rpx;
						line-height: 46rpx;
					}

					.addCart {
						position: absolute;
						right: 30rpx;
						bottom: 30rpx;
						display: flex;
						flex-direction: row;

						.reduce {
							font-size: 50rpx;
							background: #feb70f;
							width: 50rpx;
							height: 50rpx;
							text-align: center;
							border-radius: 50%;
						}

						.num {
							width: 50rpx;
							text-align: center;
							margin: 0 5rpx;
						}

						.add {
							font-size: 50rpx;
							background: #feb70f;
							width: 50rpx;
							height: 50rpx;
							text-align: center;
							border-radius: 50%;
						}

						// .img_test {
						// 	pointer-events: none;
						// 	position: absolute;
						// 	left: 20rpx;
						// 	top: 20rpx;
						// 	width: 24rpx;
						// 	height: 24rpx;
						// }
					}
				}
			}

			/* 右侧菜品列表结束 */
		}

		/* 菜品选择结束 */

		/* 底部购物车模板开始 */
		.cart-detail {

			/* 隐藏界面开始 */
			.mask {
				background-color: #313131;
				position: absolute;
				left: 0;
				top: 0;
				opacity: 0.5;
				width: 100%;
				height: 100%;
			}

			.list {
				position: absolute;
				left: 0;
				bottom: 100rpx;
				width: 100%;
				background: #f7f7f7;
				padding: 30rpx 0;
				border-radius: 10px 10px 0 0;
				.empty_cart{
					display: flex;
					height: 30rpx;
					align-items: center;
					margin-left: 80%;
					padding-bottom: 10rpx;
					text-align: right;
				}
				/* 上两个值分别为左上角和右上角 */
				.item {
					display: -webkit-flex;
					color: #333;
					font-size: 36rpx;
					line-height: 50rpx;
					padding: 20rpx 20rpx;
					border-top: 1px solid #efefef;

					/* 设置下边框的长度为父元素宽度的50% */
					.picture_shopping_cart_display {
						position: relative;
						font-size: 36rpx;
						line-height: 40rpx;
						border-bottom: 1px solid #f7f7f7;

						.add_delete_button {
							position: absolute;
							left: 580rpx;
							bottom: 10rpx;
							display: flex;
							flex-direction: row;
						}

						.shopping_cart_pic {
							float: left;
							width: 130rpx;
							height: 130rpx;
							margin-right: 20rpx;
							font-weight: bold;
							border-radius: 10rpx;
							/* 设置所有四个角的圆角半径为10像素 */
						}

						.cart_name {
							font-weight: bold;
							font-size: 30rpx;
							color: black;
						}

						.shopping_cart_sold {
							color: #989898;
							font-size: 20rpx;
							line-height: 46rpx;
						}

						.shopping_cart_price {
							color: #f45044;
							font-size: 30rpx;
							font-weight: bold;
							line-height: 46rpx;
						}
					}

					.name_shopping_cart {
						-webkit-flex: 1;
					}

					.ellipsis {
						white-space: nowrap;
						text-overflow: ellipsis;
						overflow: hidden;
					}

					.total_shopping_cart {
						width: 120rpx;
					}

					.reduce_shopping_cart {
						font-size: 40rpx;
						background: #feb70f;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						border-radius: 50%;
					}

					.num_shopping_cart {
						font-size: 25rpx;
						width: 30rpx;
						text-align: center;
						margin: 0 5rpx;
					}

					.add_shopping_cart {
						font-size: 40rpx;
						background: #feb70f;
						width: 40rpx;
						height: 40rpx;
						text-align: center;
						border-radius: 50%;
					}
				}
			}
		}

		/* 隐藏界面结束 */
		/* 固定按钮界面开始 */
		.cart {
			display: -webkit-flex;
			position: absolute;
			left: 0;
			bottom: 0;
			width: 100%;
			height: 100rpx;
			background: #fff;

			.data {
				-webkit-flex: 1;

				/*border-top: 1rpx solid #e7e7e7;*/
				.icon {
					position: absolute;
					left: 40rpx;
					top: -20rpx;
					width: 100rpx;
					height: 100rpx;
					background: #feb70f;
					border-radius: 50%;

					.image_shopping_cart {
						position: absolute;
						left: 15rpx;
						top: 15rpx;
						width: 70rpx;
						height: 70rpx;
					}

					.count {
						position: absolute;
						left: 70rpx;
						top: -10rpx;
						font-size: 30rpx;
						line-height: 40rpx;
						padding: 0 12rpx;
						color: #fff;
						background: #f45044;
						border-radius: 20rpx;
					}
				}

				.total {
					color: #f45044;
					font-size: 36rpx;
					line-height: 100rpx;
					padding-left: 160rpx;
				}
			}

			.yellow {
				color: #fff;
				background: #feb70f;
			}

			.disabled {
				background: #f4e283;
			}
		}

		/*  固定按钮界面结束 */

		/* 底部购物车模板结束 */
	}
</style>